import React, {PureComponent} from 'react'
import {Button, message} from 'antd'
import {connect} from 'dva'
import { routerRedux } from 'react-router-dom';
// import AMap from "AMap";
import Ellipsis from '@/components/Ellipsis';
import PropTypes from 'prop-types'
import PageHeaderLayout from '@/layouts/PageHeaderLayout'
import TemplateCard from '@/support/components/TemplateCard'
import * as G from '@/utils/common'

let map;
let marker;

@connect(({common, loading}) => ({
  common,
  loading: loading.models.common,
}))
export default class VehicleStatusCarPosition extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.any,
  }
  state = {
    address: '',
  }

  componentDidMount() {
    this.refresh();
  }
  componentWillUnmount() {
    sessionStorage.removeItem('vehicleLocation_position')
  }
  refresh = () => {
    let position = sessionStorage.getItem("vehicleLocation_position");
    const lng = position && position.split(',')[0]
    const lat = position && position.split(',')[1]
    const address = position && position.split(',')[2]
    this.setState({ address })
    if (lng && lat) this.initMap(Number(lng), Number(lat));
    /**获得定位的地址*/
    // window.AMap.plugin('AMap.Geocoder', () => {
    //   const geocoder = new window.AMap.Geocoder({});
    //   geocoder.getAddress([lng, lat], function(status, result) {
    //     if (status === 'complete' && result.info === 'OK') {
    //       let address = result.regeocode.formattedAddress;
    //       that.setState({ address })
    //     }
    //   });
    // });
  }

  goBack = () => {
    const { dispatch } = this.props;
    if (this.props.location && this.props.location.state) {
      const {pageObj , formValues} = this.props.location.state;
      dispatch(routerRedux.push({ pathname: '/creditVehicleManage/creditVehicle', state: { pageObj: pageObj, formValues } }));
    } else {
      dispatch(routerRedux.push({ pathname: '/creditVehicleManage/creditVehicle'}));
    }
  }

  initMap = (lon,lat) => {
    if(lon,lat){
      let obj = this.bd_decrypt(lon,lat);
      map = new AMap.Map("container", {
        resizeEnable: true,
        center: [obj.longitude, obj.latitude],
        zoom: 15
      });

      marker = new AMap.Marker({
        map: map,
        position: [obj.longitude, obj.latitude],
        icon: require('@/assets/credit_car.png'),
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
      });
    }else {
      map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 17
      });
    }
  }

  /**
   * 百度坐标转高德坐标
   * @param lon
   * @param lat
   * @returns {{lng: number, lat: number}}
   */
  bd_decrypt = (lon, lat) => {
    let X_PI = Math.PI * 3000.0 / 180.0;
    let x = lon - 0.0065;
    let y = lat - 0.006;
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    let gg_lng = z * Math.cos(theta);
    let gg_lat = z * Math.sin(theta);
    return {longitude: gg_lng, latitude: gg_lat};
  }

  render() {
    const { address } = this.state;
    return (
      <PageHeaderLayout>
        <TemplateCard>
          <span>车辆定位：<Ellipsis length={20} tooltip>{address}</Ellipsis></span>
          <Button style={{float: 'right'}} type="primary" onClick={() => history.back()}>返回</Button>
          <div id='container' style={{width: '100%', height: '500px'}}>
          </div>
        </TemplateCard>
      </PageHeaderLayout>
    )
  }
}
